<template>
<div>
	<div class="banner" @click="handleBannerClick">
		<img class="banner-img" src="//img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_600x330_0dcecae1.jpg" alt="">
		<div class="banner-info">
			<div class="banner-title">12312312</div>
			<div class="banner-number"><span class="iconfont">&#xe63b;</span>12</div>
		</div>
	</div>
	<commonGallary :imgs="imgs" v-show="showGallary" @close="handleClose"></commonGallary>
</div>
	

</template>
<script>
import CommonGallary from '../../../common/gallary/gallary'
export default{
	components:{CommonGallary},
	data(){
		return{
			imgs:['http://img1.qunarzz.com/sight/p0/1611/98/982abef16c8470daa3.img.jpg_r_800x800_aff1f252.jpg','http://img1.qunarzz.com/sight/p0/1611/c4/c492a4f4cc55f6fca3.img.jpg_r_800x800_874583ff.jpg'],
			showGallary:false
		}
	},
	methods:{
		handleBannerClick(){
			this.showGallary=true;
		},
		handleClose(){
			this.showGallary=false;
		}
	}
}
</script>
<style lang="scss">
@import '~@/assets/styles/base.scss';
	.banner{
		position: relative;
		overflow: hidden;
		height:0;
		padding-bottom:55%;
	}
	.banner-img{
		width:100%;
	}
	.banner-info{
		display: flex;
		position: absolute;
		left:0;
		right:0;
		bottom:0;
		line-height: px2rem(30px);
		color:#fff;
		background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8));
	}
	.banner-title{
		flex:1;
		font-size: px2rem(16px);
		padding:0 px2rem(5px);
	}
	.banner-number{
		padding:0 px2rem(10px);
		height:px2rem(20px);
		line-height: px2rem(20px);
		border-radius: px2rem(10px);
		background: rgba(0,0,0,.8);
		margin-right: px2rem(10px);
	}
	.banner-number span{
		font-size: px2rem(8px);
		margin-right: px2rem(3px);
	}
</style>